<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-remove="handleRemoveTab" @tab-click="handleClickTab">
      <!-- ---------------------------------左侧选项卡----------------------------------------- -->
      <el-tab-pane label="库存台账" name="1">
        <content-left v-if="activeName == '1'" @click_create_receptiondate="handleReceptiondate" />
      </el-tab-pane>
      <!-- ---------------------------------右侧选项卡----------------------------------------- -->
      <el-tab-pane label="仓库管理" name="2">
        <content-right v-if="activeName == '2'" />
      </el-tab-pane>
      <!-- ---------------------------------基值详情选项卡----------------------------------------- -->
      <template v-if="flag">
        <el-tab-pane closable label="台账详情" name="3">
          <template v-if="activeName == '3'">
            <content-detail :parentids="consumableUserIds" />
          </template>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
import contentLeft from './contener-left'
import contentRight from './contener-right'
import contentDetail from './contener-detail'
export default {
  name: 'ItemList',
  /** 可选：表单组件，操作栏组件，抽屉组件 */
  components: {
    contentLeft,
    contentRight,
    contentDetail
  },
  data () {
    return {
      activeName: '1',
      flag: false,
      consumableUserIds: {},//详情参数id集合
    }
  },
  methods: {
    handleRemoveTab () {
      this.activeName = '1'
      this.flag = false
    },
    // 接收子级传上来的 基值 ID
    handleReceptiondate (ids) {
      this.flag = true
      this.activeName = '3'
      this.consumableUserIds = ids
    },
    handleClickTab (val) {
      if (val.name == '3') {
        return
      }
      this.flag = false,
        this.applyFlag = false
    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__content {
  padding: 0;
}
</style>
